<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡</title>
    <script>
        function clickDiv(){
            location.href = "22-表格操作.html";
            console.log("正在点击div");
        }
        function clickA(){
            document.getElementById("d1").style.display = "none";
            console.log("正在点击超链接");
            // cancelBubble属性:设置或返回事件是否应该不向上层进行传递
            // 其属性值是一个布尔类型
            // true:不向上传播。即:阻止事件冒泡
            // false:默认值,向上传播,存在事件冒泡
            event.cancelBubble = true;
        }
    </script>
</head>
<body>
<div id="d1" style="width: 200px;height: 100px;background-color: red;" onclick="clickDiv()">
    <a href="javascript:;" onclick="clickA()">X</a>
</div>
</body>
</html>